应用介绍
https://code.visualstudio.com/
界面简洁大方，^_^
Vue插件安装
在 VSCode Marketplace https://marketplace.visualstudio.com/vscode 搜素Vue 出现关于语法高亮的插件有 Vue 2 Snippets，vue-beautify，vue-color，Vetur等等。花花绿绿的，往下翻看，目前使用率最高的就是Vetur了。
安装插件：⌘P 然后输入 ext install vetur 然后回车点安装即可。
但是如果你使用惯了Vim/Sublime/Atom等，VSCode允许安装自己的键盘快捷方式。
我个人选择了Sublime，设置后并激活，这时按下command+shift+p
输入 Vetur
VS Code ESLint extension
安装插件和Vetur类似。
ESLint 不是安装后就可以用的，还需要一些环境和配置：
eg：首先在自己的工作空间建立一个文件夹xmall-front，zsh中运行 npm init
然后依次执行命令，快速体验下：
~/VSCodeProjects/xmall-front npm install --save-dev eslint eslint-plugin-html
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN xmall-front@1.0.0 No repository field.
+ eslint-plugin-html@4.0.1
+ eslint@4.14.0
added 146 packages in 14.54s
~/VSCodeProjects/xmall-front ./node_modules/.bin/eslint --init
? How would you like to configure ESLint? Answer questions about your style
? Are you using ECMAScript 6 features? Yes
? Are you using ES6 modules? Yes
? Where will your code run? Browser
? Do you use CommonJS? Yes
? Do you use JSX? Yes
? Do you use React? No
? What style of indentation do you use? Tabs
? What quotes do you use for strings? Single
? What line endings do you use? Unix
? Do you require semicolons? No
? What format do you want your config file to be in? JavaScript
Successfully created .eslintrc.js file in /Users/jinkui/VSCodeProjects/xmall-front
~/VSCodeProjects/xmall-front la
. .. .eslintrc.js node_modules package-lock.json package.json
在 vscode 中配置下 ESLint：
eslint.validate - an array of language identifiers specify the files to be validated. Something like “eslint.validate”: [ “javascript”, “javascriptreact”, “html” ]. If the setting is missing, it defaults to [“javascript”, “javascriptreact”].
查看扩展：ESLint 的Settings Options，发现确实默认不支持vue文件啊。
所以说虽然安装了eslint-plugin-html还是需要配置一下的：On a Mac, click Code > Preferences > Settings
// An array of language ids which should be validated by ESLint
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "html",
"autoFix": true
},
"vue"
]
安装插件-提高效率
所有插件都类似于Sublime使用Package Control安装，按下快捷键⌘⇧P，在命令提示框搜索插件即可。
- Project Manager 在多个项目之前快速切换的工具
- HTML Snippets Full HTML tags including HTML5 Snippets
- HTML CSS Support 让 html 标签上写class 智能提示当前项目所支持的样式
- jQuery Code Snippets Over 130 jQuery Code Snippets
- Beautify Beautify code in place for VS Code
- vscode-fileheader insert header comment,and automatically update the time.
- Bracket Pair Colorizer 让括号拥有独立的颜色，易于区分。可以配合任意主题使用
- Auto Close Tag Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text does
- Auto Rename Tag Auto rename paired HTML/XML tag
- Bookmarks 添加行书签
- Indenticator 缩进高亮
- Quokka.js 不需要手动运行，行内显示变量结果
- JavaScript (ES6) code snippets ES6语法代码段
- language-stylus Stylus语法高亮和提示
- String Manipulation 字符串转换处理（驼峰、大写开头、下划线等等）
- VueHelper Vue2代码段（包括Vue2 api、vue-router2、vuex2）
- File Peek The extension supports all the normal capabilities of symbol definition tracking, but does it for file names
- Path Intellisense Visual Studio Code plugin that autocompletes filenames
- TODO Parser Parse TODOs in your working files
- Git History (git log) View git log, file or line History
- Git Lens 显示文件最近的commit和作者，显示当前行commit信息
- Git History Diff View git history. View commit details. View diff of committed files. Multi-root workspaces supported.
- gitignore .gitignore文件语法
- npm npm commands for VSCode
- npm Intellisense 导入模块时，提示已安装模块名称
- Output Colorizer 彩色输出信息
- markdownlint Markdown linting and style checking for Visual Studio Code
- vscode-icons Icons for Visual Studio Code(大大的好啊)
快捷键
见官网。https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf
修改默认快捷键
打开默认键盘快捷方式设置：
修改 keybindings.json：
// 将键绑定放入此文件中以覆盖默认值
[
// '删除一行'
{
"key": "cmd+d",
"command": "editor.action.deleteLines",
"when": "editorTextFocus && !editorReadonly"
},
// 与'删除一行'的快捷键互换
{
"key": "shift+cmd+k",
"command": "editor.action.addSelectionToNextFindMatch",
"when": "editorFocus"
},
// 大小写转换快捷键，需安装 TextTransform 插件
{
"key": "cmd+shift+y",
"command": "editor.action.transformToUppercase",
"when": "editorTextFocus"
},
{
"key": "cmd+shift+x",
"command": "editor.action.transformtolowercase",
"when": "editorTextFocus"
}
]
结语
开启一波Vue学习潮，干后端的也不能落伍啊